<template>
  <div class="details-view">
    <van-nav-bar
        title="退回"
        left-arrow
        @click-left="xy"
        fixed
    />
    <div class="ticket-list">
      <span style="margin-left: -280px;margin-bottom: 10px;">*退单原因:</span>
      <van-field
          v-model="from.reason"
          rows="2"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="请输入原因"
          border:true
          :style="{ border: '1px solid #ccc',width: '95%',height: '250px',}"
          show-word-limit
      />
    </div>
    <div>
      <p style="margin-left: -310px">附件:</p>
      <van-uploader v-model="fileList" :after-read="read" multiple :max-count="6"/>
    </div>
    <div style="margin-top: 100px">
      <van-button type="primary" @click="qr" style="background-color: #1989fa;width: 90%;border-radius: 25px"
                  size="large">确认
      </van-button>
    </div>
  </div>
</template>
<script>

import {Toast} from "vant";

export default {
  data() {
    return {
      fileList: [],
      image: [],
      from: {
        url: "",
      },
      formData: {},
      student1:{},
    }
  },
  created() {

  },
  methods: {
    read(file) {

      const files = Array.isArray(file) ? file : [file];

      files.forEach((item) => {

        // 创建 FormData

        const formData = new FormData();

        formData.append('file', item.file);


        // 上传文件到服务器

        this.axios.post('http://localhost:9999/api-cleaning-service/oss/upload', formData, {
          headers: {
            // 设置请求头
            'Content-Type': 'multipart/form-data',
          },

        }).then(res => {
          // 初始化 shippingannex 为字符串
          if (!this.formData.shippingannex) {

            this.formData.shippingannex = '';

          }

          // 将文件 URL 添加到字符串中，用逗号分隔

          this.formData.shippingannex = this.formData.shippingannex

              ? this.formData.shippingannex + ',' + res.data

              : res.data;
          this.image = this.formData.shippingannex;
          console.log(this.image);
          console.log("2222" + this.image)

          Toast.success('文件上传成功');

        })
      });
    },

    qr() {
      // let url = this.image.split(",");
      this.from.url = (this.image.split(",")).join(",");
      this.from.state = 4;
      this.from.code = this.$route.query.code;
      this.axios.post(`http://localhost:9999/api-cleaning-service/state/add`, this.from).then(res => {
        if (res.data.code == 1) {
          this.axios.post(`http://localhost:9999/api-cleaning-service/Workorder/handleupdate?code=`+this.from.code).then(res => {
            if (res.data.code == 1) {
                  Toast.success("处理成功");
                  this.$router.push('/workorderbj');
            }else{
              Toast.fail("处理失败");
            }
          })
        }
      })
    },

    xy() {
      this.$router.push('/workorderbj')
    },

  },


}
</script>


<style scoped>

.details-view {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 60px;
}

.ticket-list {
  padding: 12px;
  margin-top: 50px;
}

.ticket-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebedf0;
}

.ticket-id {
  font-size: 14px;
  color: #323233;
}

.ticket-priority {
  font-size: 14px;
  font-weight: 500;
}

.ticket-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-info {
  font-size: 13px;
  color: #646566;
  line-height: 1.5;
}

.ticket-info, .content-section {
  background: #fff;
  padding: 16px;
  margin-bottom: 8px;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  line-height: 20px;
}

.label {
  color: #646566;
  min-width: 90px;
  flex-shrink: 0;
}

.value {
  color: #323233;
  flex: 1;
}

#app {
  margin-top: -20px;
}

.title {
  height: 30px;
}

#zt {
  float: right;
  margin-right: 25px;
}


</style>